<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  text: {
    type: String,
    default: '======分割线======',
  },
  isLower: {
    type: Boolean,
    default: false,
  },
})

// 定义一个 ref 来存储动态的高度
const divHeight = ref('1.5rem'); // 默认高度
// 定义一个 ref 来存储动态的文本
const displayedText = ref(props.text);

// 监听 isLower 的变化
watch(
  () => props.isLower,
  (newVal) => {
    if (newVal) {
      divHeight.value = '0.5rem'; // 当 isLower 为 true 时，调整 div 的高度
      displayedText.value = ''; // 当 isLower 为 true 时，改变 text 的值为空字符串
    } else {
      divHeight.value = '1.5rem'; // 当 isLower 为 false 时，恢复默认高度
      displayedText.value = props.text; // 当 isLower 为 false 时，恢复默认文本
    }
  },
  { immediate: true } // 立即执行一次，确保初始值被正确设置
)
</script>

<template>
  <div class="linefeed" :style="{ height: divHeight }">{{ displayedText }}</div>
</template>

<style scoped>
.linefeed {
  /* height: 1.5rem; */
  width: 100%;
  margin-bottom: 6px;
  background-color: hsl(0,100%,88%);
  text-align: center;
  color: hsl(270,50%,68%);
}
</style>
